<!--
* @description 巡检-列表模块
* @author weil
* @date 2021/03/19 12:13:35
!-->
<template>
  <div class="inspectList-cell-top" @click="handleClick">
    <div class="inspectList-cell-mid">
      <div class="inspectList-cell-mid-top">
        <img src="../../assets/img/inspect/iconTime.png" alt />
        <div class="inspectList-cell-mid-name">
          <div style="display:inline-flex;align-items: center;">
            <span class="inspectList-iconName">{{ dataObj.labelName }}</span>
            <div class="inspectList-overdue">{{ timeDuration }}</div>
          </div>
          <div class="inspectList-taskName">{{ dataObj.name }}</div>
        </div>
      </div>
      <div class="inspectList-cell-mid-time" v-if="dataObj.status == 3">
        时限：{{ dataObj.startTime }} - {{ dataObj.endTime }}｜责任人：{{
          dataObj.lliablepersonsName
        }}
      </div>
      <div class="inspectList-cell-mid-time" v-if="dataObj.status == 1">
        时限：{{ dataObj.startTime }} - {{ dataObj.endTime }}｜责任人：{{
          dataObj.lliablepersonsName
        }}｜点位数：{{ dataObj.pointIds ? dataObj.pointIds.split(',').length : 0 }}
      </div>
      <div v-if="dataObj.status == 1" class="inspectList-cell-mid-bottom">
        <span>完成度</span>
        <van-progress :percentage="completeness" :show-pivot="false"
          color="linear-gradient(to right, #5BD1B9, #5BD1B9)" />
        <span>{{ completeness }}%</span>
      </div>
    </div>
    <div v-if="stamp && dataObj.status == 3" class="d-flex jc-end">
      <img class="stamp-unreceive" src="../../assets/img/inspect/stamp-unreceive.png" />
    </div>
    <div class="inspectList-cell-bottom"
      :class="{ 'bottom-padding': (dataObj.status == 3 || (dataObj.status == 1 && dataObj.unIsOkNum == 0 && !timeExile)) && showBtn }">
      <template v-if="showBtn">
        <van-button plain type="info" v-if="dataObj.status == 3" round color="#2471ca" size="small"
          @click="invite_others(dataObj)">邀请他人</van-button>
        <van-button type="info" v-if="dataObj.status == 3" size="small" class="affirm" color="#2471ca" round
          @click="receive_invite(dataObj)">领取</van-button>
        <van-button type="info" v-if="dataObj.status == 1" size="small" class="affirm" color="#2471ca" round
          @click="startInspect(dataObj)">开始巡检</van-button>
      </template>
    </div>
    <div class="discover-invite" v-if="dataObj.status == 1 && (dataObj.unIsOkNum > 0 || timeExile)">
      <van-swipe v-if="dataObj.unIsOkNum > 0 && timeExile" class="my-swipe" :autoplay="3000" style="height: 26px;"
        indicator-color="white" vertical :show-indicators="false">
        <van-swipe-item>已发现{{ dataObj.unIsOkNum }}个不合格点位</van-swipe-item>
        <van-swipe-item>时间紧张，请尽快处理</van-swipe-item>
      </van-swipe>
      <span v-else-if="dataObj.unIsOkNum > 0">已发现{{ dataObj.unIsOkNum }}个不合格点位</span>
      <span v-else-if="timeExile">时间紧张，请尽快处理</span>
    </div>
  </div>
</template>
<script>
import { getTimeDuration } from '@/utils/util'
export default {
  props: {
    dataObj: {
      type: Object,
      required: true,
    },
    showBtn: {
      type: Boolean,
      default: true,
    },
    stamp: {
      type: Boolean,
      default: false,
    },
    readonly: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      nowTime: new Date(),
      // 剩余时间
      timeDuration: '',
      // 剩余时间是否紧张
      timeExile: false,
      completeness: 0,
    }
  },
  computed: {},
  watch: {
    dataObj() {
      this.setDuration()
      this.setCompleteness()
    },
  },
  created() {
    this.setDuration()
    this.setCompleteness()
  },
  methods: {
    setDuration() {
      this.timeDuration = this.formatDuration()
    },
    setCompleteness() {
      this.completeness =
        this.dataObj.examined == 0
          ? 0
          : (
            (this.dataObj.examined /
              this.dataObj.pointIds.split(',').length) *
            100
          ).toFixed(2)
    },
    formatDuration() {
      if (!this.dataObj.endTime) return ''
      let endMillisecond = new Date(
        this.$moment(this.dataObj.endTime).toDate()
      ).getTime()
      let nowMillisecond = new Date().getTime()
      if (endMillisecond <= nowMillisecond) return '已过期'
      let res = getTimeDuration(
        Math.floor((endMillisecond - nowMillisecond) / 1000)
      )
      // 剩余时间是否紧张
      if (
        this.formatGapTime(this.dataObj.startTime, this.dataObj.endTime) > 0
      ) {
        this.timeExile = true
      } else {
        this.timeExile = false
      }
      return (
        res
          .map((n) => {
            return n.value + n.unit
          })
          .join('') + '过期'
      )
    },
    handleClick() {
      if (this.readonly) {
        this.$router.push({
          name: 'InspectDetail',
          query: {
            item: this.dataObj.id,
            readonly: true,
          },
          params: { refresh: true }
        })
      }
    },
    invite_others(item) {
      this.$emit('invite_others', item)
    },
    receive_invite(item) {
      this.$emit('receive_invite', item)
    },
    startInspect(item) {
      this.$emit('startInspect', item)
    },
    // 计算结束时间->开始时间差
    formatGapTime(startTime, endTime) {
      let startDate = this.$moment(startTime).toDate()
      let endDate = this.$moment(endTime).toDate()
      let staytimeAll =
        new Date(endDate).getTime() - new Date(startDate).getTime()
      let staytime = new Date(endDate).getTime() - new Date().getTime()
      return staytimeAll * 0.01 - staytime
    },
  },
}
</script>
<style lang='scss'>
.inspectList-cell-top {
  // margin: 10px;
  border-radius: 10px;

  // box-shadow: 0px 2px 10px 2px rgba(181, 200, 206, 0.5);
  // overflow: hidden;
  .inspectList-cell-mid {
    display: flex;
    flex-direction: column;
    padding: 16px 16px 0 16px;

    img {
      width: 20px;
    }

    .inspectList-cell-mid-top {
      display: inline-flex;
      flex-direction: row;
      align-items: center;

      .inspectList-cell-mid-name {
        margin-left: 12px;

        .inspectList-overdue {
          padding: 0px 8px;
          display: inline-block;
          background: rgba($color: #e55934, $alpha: 0.06);
          border-radius: 16px;
          // color: #ec876d;
          color: rgba($color: #ec876d, $alpha: 0.7);
          margin-left: 10px;
          font-size: 12px;
          line-height: 16px;
        }

        .inspectList-iconName {
          color: #999999;
          font-size: 14px;
        }

        .inspectList-taskName {
          font-size: 17px;
          color: #333333;
          font-weight: bold;
          margin-bottom: 8px;
          margin-top: 2px;
        }
      }
    }

    .inspectList-cell-mid-time {
      margin-left: 32px;
      color: #999999;
      line-height: 18px;
      font-size: 14px;
    }

    .inspectList-cell-mid-bottom {
      margin-left: 32px;
      margin-top: 6px;
      display: inline-flex;
      width: calc(100% - 32px);
      justify-content: space-between;
      align-items: center;

      span:nth-child(1) {
        color: #999999;
        font-size: 14px;
      }

      span:nth-child(3) {
        color: #5bd1b9;
        font-size: 12px;
      }

      .van-progress {
        margin: 0 10px;
        flex: 1;
      }
    }
  }

  .inspectList-cell-bottom {
    display: flex;
    justify-content: flex-end;
    margin-top: 20px;
    padding: 0 16px;

    &.bottom-padding {
      padding-bottom: 20px;
    }

    button {
      width: 80px;
      margin-left: 10px;
    }

    .van-button--plain {
      color: #2471ca;
      border: 1px solid #2471ca;
    }
  }

  .discover-invite {
    text-align: center;
    padding: 4px 0;
    background: rgba($color: #f02020, $alpha: 0.1);
    margin-top: 4px;
    color: #f02020;
    font-size: 12px;
  }

  .stamp-unreceive {
    margin-right: 10px;
    margin-bottom: -6px;
    width: 77px;
    height: 67px;
  }
}
</style>